<template>
  <div>
    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
      <el-row>
        <el-col :span="8">
          <a class="sub-title" id="projects">
            <svg-icon class-name="arrow-left" icon-class="arrow-left"></svg-icon>
            <span class="title">参与的项目</span>
            <span class="num">{{ props.total }}</span>
          </a>
        </el-col>
        <el-col :span="16" class="flex justify-end">
          <div class="flex justify-end">
            <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
              start-placeholder="开始日期" end-placeholder="结束日期" style="width: 240px;"></el-date-picker>
            <el-input v-model="queryParams.keywords" placeholder="请输入关键词" clearable
              style="width: 240px; margin-left: 15px;" @keyup.enter="handleQuery" />
            <el-button class="ml10" type="primary" icon="Search" @click="handleQuery">查看</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <el-table class="mt15" v-loading="loading" :data="dataList" stripe>
      <el-table-column label="序号" type="index" width="60" />
      <el-table-column label="项目名称" prop="name">
        <template #default="scope">
          <el-link type="primary" :href="scope.row.mohurdUrl" target="_blank">{{ scope.row.name }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="承担职务" prop="job" />
      <el-table-column label="建设单位" prop="contractor" />
      <el-table-column label="项目所在地" prop="dependency" />
      <el-table-column label="总投资(万元)" prop="investment" />
      <el-table-column label="中标日期" prop="bidDate" width="160" />
    </el-table>
    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize" @pagination="getList" />
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance()
import { getEngineerList } from '@/api/personnel'

const props = defineProps({
  personalId: {
    type: Number,
    default: null,
  },
  total: {
    type: Number,
    default: 0,
  },
})

const loading = ref(false)
const total = ref(0)
const dateRange = ref([])
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  keywords: undefined, // 关键字
  personalId: props.personalId, // 人员id
})
const dataList = ref([])

// 获取列表
function getList() {
  loading.value = true
  getEngineerList(proxy.addDateRangeCustom(queryParams.value, dateRange.value)).then(res => {
    loading.value = false
    if (res.code === 200) {
      dataList.value = res.data.list
      total.value = res.data.total
    }
  })
}

function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

getList()
</script>

<style lang="scss" scoped>
.sub-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 500;

  .title {
    color: #333333;
    margin-left: 7px;
    margin-right: 5px;
  }

  .num {
    color: #aa261d;
  }
}
</style>